<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精灵图动画</title>
</head>
<style>
    .box {
        /* 保证精灵图的大小和照片的尺寸一致   1680/12 */
        width: 140px;
        height: 140px;
        background-image: url(./accessts/bg.png);
        animation:
            move 1s steps(12) infinite,
            run 5s forwards;

    }

    @keyframes move {
        from {
            background-position: 0 0;
        }

        to {
            background-position: -1680px 0;
        }
    }

    @keyframes run {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(880px);
        }
    }
</style>

<body>
    <div class="box"></div>
</body>

</html>